<template>
<div class="page cached" data-name="product-detail">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="link back">
          <i class="f7-icons">chevron_left</i>
        </a>
      </div>
      <div class="title">
      	商品详情
      </div>
      <div class="right">
      </div>
    </div>
  </div>
  <div class="page-content">
		<div class="product-detail-container">
				
		</div>	
		<div class="product-detail-title">
			<div class="card demo-facebook-card">
			   <div class="card-content card-content-padding">
				    <p class="date">Posted on January 21, 2015</p>
			  </div>
			  <div class="card-footer"><a href="#" class="link">快递:0:00</a><a href="#" class="link">月销3397笔</a><a href="#" class="link">江苏苏州</a></div>
			</div>
		</div>
		
		<div class="product-detail-item">
			<div class="list ">
			  <ul>
			    <li>
			      <a href="#" class="item-link item-content  popup-open" data-popup=".popup-service">
			        <div class="item-media">服务</div>
			        <div class="item-inner">
			          <div class="item-title">快速退货.30天保障.正品保证</div>
			          <div class="item-after"></div>
			        </div>
			      </a>
			    </li>
			    <li>
			      <a href="#" class="item-link item-content">
			        <div class="item-media">规格</div>
			        <div class="item-inner">
			          <div class="item-title">快速退货.30天保障.正品保证</div>
			          <div class="item-after"></div>
			        </div>
			      </a>
			    </li>
			    <li>
			      <a href="#" class="item-link item-content">
			        <div class="item-media">参数</div>
			        <div class="item-inner">
			          <div class="item-title">上市年份&nbsp; 材质成分</div>
			          <div class="item-after"></div>
			        </div>
			      </a>
			    </li>
			  </ul>
			</div>
		</div>
		
		<div class="product-detail-assess">
				<div class="block-title list nomargin">
					<ul>
						<li>
					      <a href="#" class="item-link item-content">
					        <div class="item-inner">
					          <div class="item-title">宝贝评价(2018)</div>
					          <div class="item-after">查看全部</div>
					        </div>
					      </a>
    					</li>
					</ul>
				</div>
				<div class="block block-strong nomargin">
				  <div class="chip">
				    <div class="chip-media bg-color-blue">
				      <i class="icon f7-icons ios-only">add_round</i>
				    </div>
				    <div class="chip-label">质量很好(1024)</div>
				  </div>
				  <div class="chip">
				    <div class="chip-media bg-color-green">
				      <i class="icon f7-icons ios-only">compass</i>
				    </div>
				    <div class="chip-label">很舒服(1900)</div>
				  </div>
				  <div class="chip">
				    <div class="chip-media bg-color-red">
				      <i class="icon f7-icons ios-only">person</i>
				    </div>
				    <div class="chip-label">服务很好(2000)</div>
				  </div>
				</div>
				<div class="list media-list">
				  <ul class="assess-ul">
				    <li>
				      <a href="#" class="item-link item-content">
				        <div class="item-inner">
				          <div class="item-title-row">
				            <div class="item-subtitle"><img src="img/f7-icon.png" width="18">黑色幽默q猪</div>
				            <div class="item-after">2018-09-09</div>
				          </div>
				          <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				        </div>
				      </a>
				    </li>
				    <li>
				      <a href="#" class="item-link item-content">
				        <div class="item-inner">
				          <div class="item-title-row">
				            <div class="item-subtitle"><img src="img/f7-icon.png" width="18">黑色幽默q猪</div>
				            <div class="item-after">2018-09-09</div>
				          </div>
				          <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				        </div>
				      </a>
				    </li>
				  </ul>
				</div>
		</div>
		
  </div>
</div>
</template>


<script>

function productDetailSlide(){
	var slideListRequest = [
	                            {img:"img/f7-icon.png"},
	                            {img:"img/f7-icon.png"}
	                           ];
  	    var slideListTemplate = $$('#productSlideTemplate').html();
  	    var compiledSlideListTemplate = Template7.compile(slideListTemplate);
  	    var innerHTML = compiledSlideListTemplate({slideList:slideListRequest});
  	    $$(".product-detail-container").append(innerHTML);
  	    var swiper = app.swiper.create('.product-detail-swiper', {
  	        speed: 400,
  	        spaceBetween: 0
  	    });
  	    swiper.on('slideNextTransitionEnd', function () {
  	    	if(swiper.isEnd){
  	    		alert("ddd");
  	    	}
  	    });
}


  return {
    data: function () {
    	 var lotBatchListResult = [];
      return {
    	  lotBatchList: lotBatchListResult
      };
    },
  	on:{
  		 pageInit: function () {
  			 self = this;
	  	    app = self.$app;  
	  	  	router = self.$router;
  	      	productDetailSlide();
  	      	$$(".popup-service").find(".button").on('click',function(){
  	      		app.popup.close();
  	      	});
  	      	
  	      	
  		 }
  	}
	
  };
</script>
